<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    	<title>Contacts service</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		
		<script type="text/javascript" src="script/platformservices.js" charset="utf-8"></script>
        <script type="text/javascript" src="script/templates.js" charset="utf-8"></script>
		<script type="text/javascript" src="script/platformservices_20_specific.js" charset="utf-8"></script>
        <script type="text/javascript" src="script/basic.js" charset="utf-8"></script>
        
		<link href="styles/reset.css" rel="stylesheet" type="text/css"></script>
        <link href="styles/baseStyles.css" rel="stylesheet" type="text/css">
		<link href="styles/application_specific.css" rel="stylesheet" type="text/css" />		
		
    </head>
	
    <body>
    	 <div id="wrap">
          <div id="content">
            <div id="contactListContainer">
                <h1 id="header1" class="top-aligned">Contacts</h1>
                <form id="f1" name="f1" action="">
                    <ul class="nav-horizontal-rounded stack">
                        <li class="first two-piece">
                            <a href="#" onclick="newContact();">New Contact</a>
                        </li>
                        <li class="last two-piece">
                            <a href="#" onclick="startEditor();">Start Editor</a>
                        </li>
                    </ul>
                    <div style="display:block">
                        <br />
                        <br />
                        <br />
						Find: <input id="contactFilter" type="text" style="width: 80%; display: inline;" onchange="listContacts();"></input>
                    </div>
                    <div id="contactList"></div>
                </form>
            </div> 
          <div id="singleContactContainer" style="display:none">
                <form id="contact" name="contact" action="">
                  	<h1 id="header2"  class="top-aligned">New Contact</h1>
                    <ul class="nav-horizontal-flat  stack">
                        <li class="first four-piece">
                            <a id="a1" class="selectedTab" href="#" onclick="show('nameGroup',this.id);">Name</a>
                        </li>
                        <li class="four-piece">
                            <a id="a2" href="#" onclick="show('telGroup',this.id);">Telephone</a>
                        </li>
                        <li class="four-piece">
                            <a id="a3" href="#" onclick="show('addressGroup',this.id);">Address</a>
                        </li>
                        <li class="last four-piece">
                            <a id="a4" href="#" onclick="show('companyGroup',this.id);">Company</a>
                        </li>
                    </ul>
                    <div id="nameGroup" style="display:block">
                        <h5>Name</h5>
                        <table>
                            <tr>
                                <th colspan="2">
                                    <label for="lname">
                                        Last name:
                                    </label>
                                </th>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <input type="text" name="lname" id="lname" value="" />
                                </td>
                            </tr>
                            <tr>
                                <th colspan="2">
                                    <label for="fname">
                                        First name: 
                                    </label>
                                </th>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <input type="text" name="fname" id="fname" value="" />
                                </td>
                            </tr>
                            <tr>
                                <th colspan="2">
                                    <label for="mname">
                                        Middle name:
                                    </label>
                                </th>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <input type="text" name="mname" id="mname" value="" />
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <label for="pref">
                                        Prefix:
                                    </label>
                                </th>
                                <th>
                                    <label for="suf">
                                        Suffix:
                                    </label>
                                </th>
                            </tr>
                            <tr>
                                <td>
                                    <input type="text" name="pref" id="pref" value="" />
                                </td>
                                <td>
                                    <input type="text" name="suf" id="suf" value="" />
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div id="telGroup" style="display:none">
                        <h5>Telephone</h5>
                        <table>
                            <tr>
                                <th>
                                    <label for="land">
                                        Landline:
                                    </label>
                                </th>
                            </tr>
                            <tr>
                                <td>
                                    <input style="-wap-input-format: '*n'" type="text" name="land" id="land" value="" />
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <label for="mobile">
                                        Mobile:
                                    </label>
                                </th>
                            </tr>
                            <tr>
                                <td>
                                    <input style="-wap-input-format: '*n'" type="text" name="mobile" id="mobile" value="" />
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <label for="video">
                                        Video:
                                    </label>
                                </th>
                            </tr>
                            <tr>
                                <td>
                                    <input style="-wap-input-format: '*n'" type="text" name="video" id="video" value="" />
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <label for="fax">
                                        Fax:
                                    </label>
                                </th>
                            </tr>
                            <tr>
                                <td>
                                    <input style="-wap-input-format: '*n'" type="text" name="fax" id="fax" value="" />
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <label for="voip">
                                        Voip:
                                    </label>
                                </th>
                            </tr>
                            <tr>
                                <td>
                                    <input type="text" name="voip" id="voip" value="" />
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div id="addressGroup" style="display:none">
                        <h5>Address</h5>
                        <table>
                            <tr>
                                <th colspan="2">
                                    <label for="street">
                                        Street:
                                    </label>
                                </th>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <input type="text" name="street" id="street" value="" />
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <label for="city">
                                        City:
                                    </label>
                                </th>
                                <th>
                                    <label for="region">
                                        Region:
                                    </label>
                                </th>
                            </tr>
                            <tr>
                                <td>
                                    <input type="text" name="city" id="city" value="" />
                                </td>
                                <td>
                                    <input type="text" name="region" id="region" value="" />
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <label for="pcode">
                                        Postal/ZIP code:
                                    </label>
                                </th>
                                <th>
                                    <label for="country">
                                        Country:
                                    </label>
                                </th>
                            </tr>
                            <tr>
                                <td>
                                    <input style="-wap-input-format: '*n'" type="text" name="pcode" id="pcode" value="" />
                                </td>
                                <td>
                                    <input type="text" name="country" id="country" value="" />
                                </td>
                            </tr>
                            <tr>
                                <th colspan="2">
                                    <label for="email">
                                        E-mail:
                                    </label>
                                </th>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <input type="text" name="email" id="email" value="" />
                                </td>
                            </tr>
                            <tr>
                                <th colspan="2">
                                    <label for="url">
                                        Web address:
                                    </label>
                                </th>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <input type="text" name="url" id="url" value="" />
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div id="companyGroup" style="display:none">
                        <h5>Company</h5>
                        <table>
                            <tr>
                                <th>
                                    <label for="cname">
                                        Company name:
                                    </label>
                                </th>
                            </tr>
                            <tr>
                                <td>
                                    <input type="text" name="cname" id="cname" value="" />
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <label for="jtitle">
                                        Job title:
                                    </label>
                                </th>
                            </tr>
                            <tr>
                                <td>
                                    <input type="text" name="jtitle" id="jtitle" value="" />
									<input type="hidden" name="contactID" id="contactID" value="" />
                                </td>
                            </tr>
                        </table>
                    </div>
					<ul class="nav-horizontal-rounded stack">
                    	<li class="first two-piece">
                        	 <a href="#" onclick="saveContact();">Save</a>
                            </li>
                            <li class="last two-piece">
                                <a href="#" onclick="showContactList();">Cancel</a>
                            </li>
					</ul>		
                </form>
            </div>
        </div>
		</div>
    </body>
</html>